import Taro, { useDidShow, useLoad } from "@tarojs/taro";
import { useEffect, useState } from "react";
import { Text, View, Image } from "@tarojs/components";
import { Button, DatePicker, Picker } from "@nutui/nutui-react-taro";
import InfiniteLoading from "../../components/InfiniteLoading";
import InfiniteLoadingFoot from "../../components/InfiniteLoadingFoot";
import usePage from "../../hooks/usePage";
import { iconClockBlack, iconDownGray } from "../../assets/files";



import { pageTrainingInfo } from "../../api/apply";
import { navigateTo } from "../../common/_";
import { getSystemDictValue } from "../../utils/globalData";

import dayjs from "dayjs";
import TrainingList from "../training-list";
import Apply from "../apply";
import NavTab from "../../components/navTab";
import "./index.scss";

definePageConfig({
  navigationBarTitleText: "测试记录",
  disableScroll: true,
});

export default function Record() {
  const [timeStartVisible, setTimeStartVisible] = useState(false);
  const [timeEndVisible, setTimeEndVisible] = useState(false);
  const [timeType, setTimeType] = useState();
  const [params, setParams] = useState({
    startDate: dayjs().subtract(5, 'day').format('YYYY-MM-DD'),
    endDate: dayjs().add(25, 'day').startOf('day').format('YYYY-MM-DD'),
    auditState: "",
    pageSize: 10,
    date: ""
  });
  const { listData, refreshing, empty, loadMore, onPull, onLoad } = usePage({
    request: pageTrainingInfo,
    params,
  });

  const [shenqStatus, setShenqStatus] = useState([
    {
      id: "",
      name: "全部",
      color: '#FF8916',
      bgColor: 'rgba(255, 212, 148, 0.3)'
    },
    {
      id: 1,
      name: "审核中",
      color: '#FF8916',
      bgColor: 'rgba(255, 212, 148, 0.3)'
    },
    {
      id: 2,
      name: "待培训",
      color: '#6486FF',
      bgColor: 'rgba(148, 197, 255, 0.5)'
    },
    {
      id: 3,
      name: "已拒绝",
      color: '#FF1616',
      bgColor: 'rgba(255, 148, 148, 0.5)'
    },
    {
      id: 4,
      name: "已培训",
      color: 'rgba(7, 193, 96, 1)',
      bgColor: 'rgba(176, 255, 214, 0.35)'
    },
  ]);

  useEffect(() => {
    Taro.eventCenter.on('reList', handleUpdate);

    return () => {
      Taro.eventCenter.off('reList', handleUpdate);
    }
  }, [])

  const handleUpdate = () => {
    setParams({
      ...params,
      date: new Date()
    })
  }

  const navigateToDetails = (item) => {
    navigateTo('/pages/apply-detail/index', item)
  };

  function selectTime(type) {
    setTimeType(type);
    if (type === "start") {
      setTimeStartVisible(true);
    } else {
      setTimeEndVisible(true);
    }
  }

  function confirmTime(values, options) {
    console.log(values, options);
    let data = ""
    if (values.join("-").includes("02-31") || values.join("-").includes("02-30")) {
      data = dayjs().year() + '-02-01'
    } else {
      data = values.join("-")
    }
    if (timeType === "start") {
      setParams({
        ...params,
        startDate: data
      })
    } else {
      setParams({
        ...params,
        endDate: data
      })
    }
  }

  const [visible, setVisible] = useState(false)
  const [baseDesc, setBaseDesc] = useState('')
  const listData1 = [
    [
      { value: "", text: '全部' },
      { value: 1, text: '审核中' },
      { value: 2, text: '待培训' },
      { value: 3, text: '已拒绝' },
      { value: 4, text: '已培训' },
    ],
  ]

  const changePicker = (list, option, columnIndex) => {
    console.log(columnIndex, option)
  }
  const confirmPicker = (
    options,
    values
  ) => {
    setParams({
      ...params,
      auditState: values[0] ? parseInt(values[0]) : ""
    })
  }

  function matchType(type) {
    for (let index = 0; index < shenqStatus.length; index++) {
      const element = shenqStatus[index];
      if (element.id == type) {
        return element
      }

    }
  }

  const toApply = (e, item) => {
    e.stopPropagation()
    navigateTo('/pages/apply/index', item)
  }

  const [cur, setCur] = useState(1)
  const [item, setItem] = useState({})
  return (
    <View className={"reservation-record-page"}>
      <NavTab
        tabCur={cur}
        tabList={[{ name: '培训申请', id: 1 }, { name: '培训记录', id: 2 }]}
        onChangeCallback={(cur) => {
          setCur(cur)
        }}
      />
      <Apply
        item={item}
        changeCur={(cur) => {
          setCur(cur)
        }}
      />
      {/* {
        cur === 1 ?
          <Apply
            item={item}
            changeCur={(cur) => {
              setCur(cur)
            }}
          />
          :
          <TrainingList
            changeCur={(cur, item) => {
              setCur(cur)
              setItem(item)
            }}
          />
      } */}


    </View>
  );
}
